<template>
  <div class="setting-tuan-container">
    <div class="applet-blendent-header">团购配置</div>
    <el-form :model="configData" ref="tuanform" :rules="rules" label-width="170px" size="small" style="margin: 20px auto">
      <el-form-item label="开启社区团购">
        <el-switch v-model="configData.is_open" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="公告" prop="content">
        <el-input v-model="configData.content" placeholder="请输入" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="休市时间">
        <el-time-picker v-model="configData.open_time"  value-format="HH:mm:ss" style="width:19%"></el-time-picker>
         至
        <el-time-picker v-model="configData.close_time"  value-format="HH:mm:ss" style="width:19%"></el-time-picker>
      </el-form-item>
      <el-form-item label="团长申请海报">
        <select-img @selectData="data => configData.banner_pic_url = data[0]"/>
      </el-form-item>
      <el-form-item v-if="configData.banner_pic_url !== ''">
        <l-pic :picurl="configData.banner_pic_url" :size="{width:100, height:100}" :disdel="false" :disview="false"/>
      </el-form-item>
      <el-form-item label="休市海报">
        <select-img @selectData="data => configData.close_pic_url = data[0]"/>
      </el-form-item>
      <el-form-item v-if="configData.close_pic_url !== ''">
        <l-pic :picurl="configData.close_pic_url" :size="{width:100, height:100}" :disdel="false" :disview="false"/>
      </el-form-item>
      <el-form-item label="供应商申请海报">
        <select-img @selectData="data => configData.pic_url = data[0]"/>
      </el-form-item>
      <el-form-item v-if="configData.pic_url !== ''">
        <l-pic :picurl="configData.pic_url" :size="{width:100, height:100}" :disdel="false" :disview="false"/>
      </el-form-item>
      <el-form-item label="发货方式">
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="1">快递</el-checkbox>
          <el-checkbox label="2">自提</el-checkbox>
          <el-checkbox label="3">团长配送</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="自定义团长名称" prop="leader_name">
        <el-input v-model="configData.leader_name" placeholder="请输入" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="团长覆盖范围" prop="leader_range">
        <el-input v-model="configData.leader_range" placeholder="请输入" style="width: 40%"/>公里
      </el-form-item>
      <el-form-item label="提现手续费" prop="withdraw_fee_ratio">
        <el-input v-model="configData.withdraw_fee_ratio" placeholder="请输入" style="width: 40%"/>%
      </el-form-item>
      <el-form-item label="最低提现金额" prop="min_withdraw_money">
        <el-input v-model="configData.min_withdraw_money" placeholder="请输入" style="width: 40%"/>最低1元
      </el-form-item>
      <!--<el-form-item label="团长佣金" prop="commission_leader_ratio">-->
        <!--<el-input v-model="configData.commission_leader_ratio" placeholder="请输入" style="width: 40%"/>%-->
      <!--</el-form-item>-->
      <el-form-item label="团长佣金" prop="commission_selfleader_ratio">
        <el-input v-model="configData.commission_selfleader_ratio" placeholder="请输入" style="width: 40%"/>%
      </el-form-item>
    </el-form>

    <div style="text-align:center;margin-top:15px">
      <el-button type="primary" size="small" style="padding:8px 30px;" @click="submit">提 交</el-button>
    </div>
  </div>
</template>

<script>
import { getTuanConfig, postTuanConfig } from '@/api/setting'
import SelectImg from '@/components/SelectImg'
import LPic from '@/components/lPic'

export default {
  name: 'setting-tuanconfig',
  components: {
    SelectImg,
    LPic
  },
  data() {
    return {
      configData: {
        is_open: '1',
        content: '',
        open_time: '',
        close_time: '',
        banner_pic_url: '',
        close_pic_url: '',
        pic_url: '',
        is_express: '1',
        is_site: '0',
        is_tuan_express: '0',
        leader_name: '',
        leader_range: '',
        min_withdraw_money: '',
        withdraw_fee_ratio: '',
        commission_leader_ratio: '',
        commission_selfleader_ratio: '',
        key: this.$store.state.app.activeApp.saa_key,
        id: this.$store.state.app.activeApp.saa_id
      },
      times: '',
      checkList: [],

      rules: {
        content:[{ required:true, message:'请输入公告', trigger: 'blur' }],
        leader_name:[{ required:true, message:'请输入自定义团长名称', trigger: 'blur' }],
        leader_range:[{ required:true, message:'请输入团长覆盖范围', trigger: 'blur' }],
        withdraw_fee_ratio:[{ required:true, message:'请输入提现手续费', trigger: 'blur' }],
        min_withdraw_money:[{ required:true, message:'请输入最低提现金额', trigger: 'blur' }],
        commission_leader_ratio:[{ required:true, message:'请输入团长佣金', trigger: 'blur' }],
        commission_selfleader_ratio:[{ required:true, message:'请输入自提点佣金', trigger: 'blur' }],
      }
    }
  },
  watch: {
    checkList(val) {
      this.configData.is_express = val.indexOf('1') > -1 ? '1' : '0';
      this.configData.is_site = val.indexOf('2') > -1 ? '1' : '0';
      this.configData.is_tuan_express = val.indexOf('3') > -1 ? '1' : '0';
    }
  },
  mounted() {
    this.getConfig();
  },
  methods: {
    /**
     * 获取团购配置
     */
    getConfig() {
      getTuanConfig({key: this.$store.state.app.activeApp.saa_key}).then(res => {
        if(res.status === 200) {
          this.configData = res.data;
          this.times = [this.configData.open_time,this.configData.close_time];
          if(this.configData.is_express === '1') {
            this.checkList.push('1');
          }
          if(this.configData.is_site === '1') {
            this.checkList.push('2');
          }
          if(this.configData.is_tuan_express === '1') {
            this.checkList.push('3');
          }
        }else if(res.status === 204) {
          this.configData = {
            is_open: '1',
            content: '',
            open_time: '',
            close_time: '',
            banner_pic_url: '',
            close_pic_url: '',
            pic_url: '',
            is_express: '1',
            is_site: '0',
            is_tuan_express: '0',
            leader_name: '',
            leader_range: '',
            min_withdraw_money: '',
            withdraw_fee_ratio: '',
            commission_leader_ratio: '',
            commission_selfleader_ratio: '',
            key: this.$store.state.app.activeApp.saa_key,
            id: this.$store.state.app.activeApp.saa_id
          }
        }else {
          this.$message.error(res.message);
        }
      })
    },
    submit() {
      this.$refs.tuanform.validate(valid => {
        if(valid) {
          const params = {
            is_open: this.configData.is_open,
            content: this.configData.content,
            open_time: this.configData.open_time,
            close_time: this.configData.close_time,
            banner_pic_url: this.configData.banner_pic_url,
            close_pic_url: this.configData.close_pic_url,
            pic_url: this.configData.pic_url,
            is_express: this.configData.is_express,
            is_site: this.configData.is_site,
            is_tuan_express: this.configData.is_tuan_express,
            leader_name: this.configData.leader_name,
            leader_range: this.configData.leader_range,
            min_withdraw_money: this.configData.min_withdraw_money,
            withdraw_fee_ratio: this.configData.withdraw_fee_ratio,
            commission_leader_ratio: this.configData.commission_leader_ratio,
            commission_selfleader_ratio: this.configData.commission_selfleader_ratio,
            key: this.$store.state.app.activeApp.saa_key
          }

          postTuanConfig(params).then(res => {
            if(res.status === 200) {
              this.$message.success('修改成功！');
            }else{
              this.$message.error(res.message);
            }
          })
        }else{
          this.$message.warning('请按要求完整填写表单！')
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.setting-tuan-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.applet-blendent-header{
  height: 40px;
  width: 100%;
  line-height: 40px;
  font-size: 16px; 
  font-weight: 600;
  letter-spacing: 2px;
  color: #8f8f8f;
  padding: 0 10px;
  background-color: #F4F8FB;
}
</style>